<script>
	// Columnas de la tabla entrega
	var cols = new Array("id", "estado", "fletero", "direccion", "contacto");

	// document ready
	$(document).ready( function() {
		
		// event binding
		$('#refreshListButton').bind('click', reloadList);
		$('#agregarButton').bind('click', showModal);
		$('#editButton').bind('click', getEntrega);
		$('#button-save-entrega').bind('click', saveEntrega);
		$('#deleteButton').bind('click', deleteEntrega);
		$('#searchButton').bind('click', searchEntrega);
		
		// Today date
		var nowTemp = new Date();
		var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
		
		// calendars
		$('#fechaInicio-calendar').bind('click', function() {
			$('#fechaInicioDP').datepicker();
			$('#fechaInicioDP').datepicker('setValue', now);
			$('#fechaInicioDP').datepicker('show');
		});
		
		$('#fechaFin-calendar').bind('click', function() {
			$('#fechaFinDP').datepicker();
			$('#fechaFinDP').datepicker('setValue', now);
			$('#fechaFinDP').datepicker('show');
		});
		
		// primer carga de la lista
		reloadList();
	});
	
	// Ventana modal para agregar / editar producots
	$("#agregarEntrega").modal();
	
	/**
	 * Abre la ventana modal de entrega
	 */
	function showModal() {

		$("#agregarEntrega").modal();

		$(':input', '#entregaForm').not(':button, :submit, :reset')
		  							.val('')
		  							.removeAttr('checked')
		  							.removeAttr('selected');
	}
	
	/**
	 * Busca entregas
	 */
	function searchEntrega() {
		
		$.fn.getList('entregas_buscar', 'listaEntregas', 'entregaSearchForm', cols);
	}
	 
	 
	/**
	 * Guarda un entrega
	 */
	function saveEntrega() {
		$.fn.send('entregas_agregar', 'entregaForm', 'button-save-entrega', null, reloadList);
	}
	
	
	/**
	 * Borrar un entrega
	 */
	function deleteEntrega() {
		
		if (confirm("Realmente quieres eliminar este entrega?")) {
			var value = ( $(":checked")[1]).value;
			$.fn.send('entregas_borrar', null , null, 'id='+value , reloadList);
		}
	}
	
	/**
	 * Reload entrega list
	 */
	function reloadList() {
		
		$.fn.getList('entregas_getEntregas', 'listaEntregas', null, cols);
	}
	
	/**
	 * Edit entregas
	 */
	function getEntrega() {
		
		var value = ( $(":checked")[1]).value;		// Tiene un 1 ya que el 0 corresponde al select del filtro de busqueda
		$.fn.getById('entregas_getEntrega', value);
		
		$("#agregarEntrega").modal();
	}
</script>

<div class="page-header">
	<h1>
		Entregas
		<br/>
		<small>Administraci&oacute;n de entregas</small>
	</h1>
</div>

<div>

	
	<!-- 
		Busqueda
	 -->
	<div class="well span11" style="margin-bottom:10px;padding-bottom:0px;">
		<form id="entregaSearchForm" class="form-inline" style="margin-bottom:0px;padding-bottom:0px;">
			<div class="control-group">
			
				<div class="span1" style="width:40px">
					<label for="estado">Estado: </label>
				</div>
				<div class="span3" style="width:150px">
					<select id="estado" name="entregaDTO.estado" class="span2">
						<option value="">TODAS</option>
						<option value="ENTREGADA">ENTREGADA</option>
						<option value="PENDIENTE">PENDIENTE</option>
					</select>
				</div>
				
				<div class="span1" style="width:80px">
					<label for="fecha">Fecha inicio:</label>
				</div>
				<div class="span3" style="width:180px">
					<div class="input-append date" id="fechaInicioDP" data-date="01/01/1970" data-date-format="dd/mm/yyyy">
	 					<input class="span2" size="16" type="text" value="01/01/1970" id="fechaInicio" name="fechaInicio">
					    <span class="add-on" id="fechaInicio-calendar"><i class="icon-calendar"></i></span>
	  				</div> 
				</div>
				
				<div class="span1" style="width:80px">
					<label for="fecha">Fecha fin:</label>
				</div>
				<div class="span3" style="width:180px">
					<div class="input-append date" id="fechaFinDP" data-date="01/01/1970" data-date-format="dd/mm/yyyy">
	 					<input class="span2" size="16" type="text" value="01/01/1970" id="fechaFin" name="fechaFin">
					    <span class="add-on" id="fechaFin-calendar"><i class="icon-calendar"></i></span>
	  				</div> 
				</div>
				
				<a class="btn" id="searchButton"><i class="icon-search"></i></a>
			</div>
		</form>
	</div>
	
	
	<!-- 
		Opciones
	  -->
	<div class="option-container">
		<a class="btn" id="refreshListButton"><i class="icon-refresh"></i></a>
		<!--a class="btn" id="agregarButton"><i class="icon-plus"></i></a-->
		<a class="btn" id="editButton"><i class="icon-edit"></i></a>
		<!--a class="btn" id="deleteButton"><i class="icon-trash"></i></a-->
	</div>
	
	
	
	<!-- 
		Listado de entregas 
	-->
	<form id="entregaListForm">
	<table class="table table-hover span12" style="margin:0">
		<thead>
			<tr>
				<th></th>
				<th>Estado</th>
				<th>Fletero</th>
				<th>Direcci&oacute;n</th>
				<th>Contacto</th>
			</tr>
		</thead>
		<tbody id="listaEntregas">
		</tbody>		
	</table>
	</form>
     
     
    <!--
    	 Agregar entrega 
      -->
    <div id="agregarEntrega" class="modal hide agregarModalForm" tabindex="-1" role="dialog" aria-labelledby="agregarEntregaLabel" aria-hidden="true">
    	<div class="modal-header">
    		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    		<h3 id="myModalLabel">Modificar entrega</h3>
   		</div>
   		
   		<div class="modal-body">
			<div class="mensajes-container">
			    <div class="mensajes alert" style="display:none">
		    	</div>
			</div> 
			
		   	<form id="entregaForm" class="form-horizontal">
		   		<input type="hidden" id="id" name="entregaDTO.id" />
					
				<label class="control-label" for="estado">Estado</label>
				<div class="controls">
					<select id="estado" name="entregaDTO.estado" class="span2">
						<option value="ENTREGADA">ENTREGADA</option>
						<option value="PENDIENTE">PENDIENTE</option>
					</select>
				</div>
					
				<label class="control-label" for="costo">Costo</label>
				<div class="controls">
					<input type="text" id="costo" name="entregaDTO.costo" class="input-large">
				</div>	
				
				<label class="control-label" for="fletero">Fletero</label>
				<div class="controls">
					<input type="text" id="fletero" name="entregaDTO.fletero" class="input-large">
				</div>

				<label class="control-label" for="contacto">Contacto</label>
				<div class="controls">
					<input type="text" id="contacto" name="entregaDTO.contacto" class="input-large">
				</div>

				<label class="control-label" for="telefono">Tel&eacute;fono</label>
				<div class="controls">
					<input type="text" id="telefono" name="entregaDTO.telefono" class="input-large">
				</div>

				<label class="control-label" for="direccion">Direcci&oacute;n</label>
				<div class="controls">
					<input type="text" id="direccion" name="entregaDTO.direccion" class="input-large">
				</div>				
					
					
				<!-- Datos Venta -->
				<div id="ventaDTO" class="well" style="padding:12px; padding-top:8px; margin-top:10px; background-color: #FDFDFD">
					<h5 style="margin-top:0">Venta relacionada</h5>
					<div class="row" style="margin-bottom:5px;">
						<div class="span1">
							<label for="fecha">Fecha</label>
						</div>
						<div class="span2">
							<input type="text" id="fecha" name="entregaDTO.ventaDTO.fecha" class="span2" disabled>
						</div>
					
						<div id="facturaDTO" style="margin-bottom:5px;">
							<div class="span1">
								<label for="monto">Monto</label>
							</div>					
							<div class="span2">
								<div class="input-prepend">
									<span class="add-on">$</span>
									<input type="text" id="monto" name="entregaDTO.ventaDTO.facturaDTO.monto" style="width:100px" disabled>
								</div>
							</div>
						</div>
					</div>
					
					<div id="facturaDTO" class="row" style="margin-bottom:5px;">
						<div class="span1">							
							<label for="estado">Estado</label>
						</div>
						<div class="span2">
							<input type="text" id="estado" name="entregaDTO.ventaDTO.facturaDTO.estado" class="span2" disabled>
						</div>						
	
						<div class="span1">
							<label for="tipo">Factura</label>
						</div>
						<div class="span2">
							<input type="text" id="tipo" name="entregaDTO.ventaDTO.facturaDTO.tipo" class="input-mini" style="width:20px" disabled>
							<input type="text" id="numero" name="entregaDTO.ventaDTO.facturaDTO.numero" class="span2" style="width:88px" disabled>
						</div>
					</div>
				</div>
				
		    </form>
   		</div>
   		
   		<div class="modal-footer">
    		<button class="btn btn-primary" id="button-save-entrega" data-loading-text="Enviando..." >Guardar</button>
    		<button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    	</div>
    </div>
    
    
    
    
</div>